<template>
  <view class="home_container app_container_page">
    <view class="addressBox">
      <view class="addressLeft" @click="handleJump('/pages/position/index')">
        <van-icon name="location" size="24" color="red" />
        <text>{{ address }}</text>
      </view>
      <van-search class="search" @change="searchChange" placeholder="请输入门店或幼儿园" use-action-slot @search="onSearch" background="#ffff62">
        <view slot="action" @click="searchClick" class="searchBtn">搜索</view>
      </van-search>
    </view>
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500" :circular="true">
      <swiper-item v-for="swiper in swiperList" :key="swiper.id">
        <image :src="swiper.img" :lazy-load="true"></image>
      </swiper-item>
    </swiper>
    <view class="function">
      <view class="Title1">功能栏</view>
      <view class="functionList">
        <view class="picTop">
          <view class="bigImg reportPic" @click="handleJump('/pages/children/list', true)">体质报告</view>
          <view>
            <view class="smallImg shopPic" @click="handleJump('/pages/shop/shop')">品牌门店</view>
            <view class="smallImg healthyPic" @click="handleJump('/pages/healthyDiet/index')">健康配餐</view>
          </view>
        </view>
        <view class="picBottom">
          <view class="bigImg improvingPic" @click="handleJump('/pages/improving/improving')">改善课程</view>
          <view class="bigImg expectPic" @click="handleJump('/pages/expect/index')">敬请期待</view>
        </view>
      </view>
    </view>
    <view class="Title">推荐视频 </view>
    <view class="videoList">
      <pullRefreshView class="pullRefreshVideoView" ref="pullRefreshVideoView" :fetchFn="fetchVideoList">
        <template v-slot:default="{ list }">
          <appVideoListCard style="width: 690rpx" v-for="video in list" :key="video.id" :video="video" @VIDEOLIST_CARD_CLICK="toVideoDetail"></appVideoListCard>
        </template>
      </pullRefreshView>
    </view>
  </view>
</template>

<script>
import appVideoListCard from '@/components/app/app_videoList_card.vue'
import pullRefreshView from '@/components/app/pull-refresh-view.vue'

import { findBannerListAll, recommendVideoList } from '@/api/home'
export default {
  components: {
    appVideoListCard,
    pullRefreshView
  },
  data() {
    return {
      searchValue: '',
      address: '定位',
      swiperList: Object.freeze([])
    }
  },
  methods: {
    fetchVideoList(params) {
      return recommendVideoList({
        ...params
      })
    },
    toVideoDetail(val) {
      uni.navigateTo({
        url: '/pages/videoDetail/index?id=' + val.id
      })
    },
    searchChange(e) {
      this.searchValue = e.detail
    },
    // 点击搜索或者回车跳转到幼儿园列表页面
    onSearch(e) {
      this.searchValue = e.detail
      uni.navigateTo({
        url: '/pages/searchList/index?searchValue=' + this.searchValue
      })
    },
    searchClick() {
      uni.navigateTo({
        url: '/pages/searchList/index?searchValue=' + this.searchValue
      })
    },
    handleJump(url, needCheckLogin) {
      if (needCheckLogin && !this.$checkLogin()) return
      uni.navigateTo({
        url
      })
    },
    async positionFn() {
      try {
        const res = await this.$uniPromisify.getLocation()
        const latitude = res.latitude
        const longitude = res.longitude
        const result = await this.$uniPromisify.request({
          showLoading: false,
          method: 'GET',
          url: 'https://restapi.amap.com/v3/geocode/regeo?key=eb41d25b841f6e35549544e571bae6d2&' + '&location=' + longitude + ',' + latitude
        })
        const address = {
          cityName: result.regeocode.addressComponent.city.substring(0, result.regeocode.addressComponent.city.length - 1),
          cityCode: result.regeocode.addressComponent.adcode
        }
        this.$store.commit('SET_POSITION', address)
        uni.setStorageSync('nowCity', JSON.stringify(address))
        this.address = address.cityName
      } catch (error) {
        console.log(error)
        this.address = '定位'
      }
    }
  },
  async onLoad() {
    this.positionFn()
    findBannerListAll().then((res) => {
      if (res.code === 200) {
        this.swiperList = res.data || []
      }
    })
  },
  onShow() {
    // 退出对比模式
    this.$store.commit('SET_VALUE', {
      key: 'isComparing',
      val: false
    })
    if (this.$store.state.activeAddress.cityName) {
      this.address = this.$store.state.activeAddress.cityName
    }
  },
  onPullDownRefresh() {
    this.$refs.pullRefreshVideoView.fetchList(true).then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    this.$refs.pullRefreshVideoView.fetchList()
  }
}
</script>

<style lang="scss">
.home_container {
  .addressBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16rpx 0 0rpx;
    height: 100rpx;
    background: $theme-color;

    .addressLeft {
      // flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 38rpx;
      margin-right: 10rpx;

      text {
        display: inline-block;
        max-width: 200rpx;
        @include text-ellipsis();
      }
    }

    .addressIcon {
      width: 15rpx;
      height: 15rpx;
      background: $theme-color;
      border-radius: 50%;
    }

    .search {
      flex: 1;
      .van-search__content {
        background: $theme-color !important;
        padding: 0;
      }

      .van-search--withaction {
        padding: 0;
      }

      .van-search__field {
        // width: 420rpx;
        background: #ffffff;
        border-radius: 30rpx;
        padding: 0 0 0 24rpx;
      }

      .van-search__action {
        background: $theme-color;
      }
    }

    .searchBtn {
      font-size: 38rpx;
      color: #000000;
    }
  }

  .swiper {
    width: 750rpx;
    height: 400rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .function {
    height: 671rpx;
    padding: 0 30rpx 0 28rpx;
    background: #ffffff;
    .Title1 {
      height: 99rpx;
      line-height: 99rpx;
      font-size: 40rpx;
    }
    .functionList {
      height: 570rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 40rpx;
      line-height: 70rpx;
      color: #ffffff;
      text-align: center;

      .bigImg {
        width: 332rpx;
        height: 272rpx;
        padding-top: 205rpx;
      }

      .reportPic {
        background-image: url('#{$BASEURL}/reportPic.png');
        background-size: cover;
        background-repeat: no-repeat;
      }

      .improvingPic {
        background-image: url('#{$BASEURL}/improvingPic.png');
        background-size: cover;
        background-repeat: no-repeat;
      }

      .expectPic {
        background-image: url('#{$BASEURL}/expectPic.png');
        background-size: cover;
        background-repeat: no-repeat;
      }

      .smallImg {
        padding-top: 57rpx;
        width: 330rpx;
        height: 120rpx;
      }

      .shopPic {
        background-image: url('#{$BASEURL}/shopPic.png');
        background-size: cover;
        background-repeat: no-repeat;
      }

      .healthyPic {
        background-image: url('#{$BASEURL}/healthyPic.png');
        background-size: cover;
        background-repeat: no-repeat;
      }

      .picTop {
        width: 100%;
        height: 272rpx;
        display: flex;
        justify-content: space-between;

        view {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }

      .picBottom {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .Title {
    height: 110rpx;
    line-height: 110rpx;
    font-size: 40rpx;
    padding-left: 30rpx;
  }
  .videoList {
    padding: 0 30rpx;
  }
  app-video-list-card ~ app-video-list-card {
    margin-top: 30rpx;
  }
}
</style>
